<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>惠州学院实验室系统</title>
		<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: 'montserrat', sans-serif;
				box-sizing: border-box;
			}
			.services-section {
				background: #333;
				background-size: cover;
				padding: 25px 0;
				position: absolute;
				height: 100%;
				width: 100%;
			}
			.inner-width {
				width: 100%;
				max-width: 1200px;
				margin: auto;
				padding: 0 20px;
				overflow: hidden;
				height: inherit;
			}
			.section-title {
				text-align: center;
				color: #ddd;
				text-transform: uppercase;
				font-size: 30px;
			}
			.border {
				width: 250px;
				height: 2px;
				background: #82ccdd;
				margin: 40px auto;
			}
			.services-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			.service-box {
				width: 33.33%;
				padding: 10px;
				text-align: center;
				color: #ddd;
				cursor: pointer;
			}
			.service-icon {
				display: inline-block;
				width: 70px;
				height: 70px;
				border: 3px solid #82ccdd;
				color: #82ccdd;
				transform: rotate(45deg);
				margin-bottom: 30px;
				margin-top: 16px;
				transition: 0.3s linear;
			}
			.service-icon i {
				line-height: 70px;
				transform: rotate(-45deg);
				font-size: 26px;
			}
			.service-box:hover .service-icon {
				background: #82ccdd;
				color: #ddd;
			}
			.service-title {
				font-size: 18px;
				text-transform: uppercase;
				margin-bottom: 10px;
			}
			.service-desc {
				font-size: 14px;
                height: 85px;
			}
            footer {
                font-size: .8rem;
				color: gray;
			}
            .left {
				padding: 8px 8px 0 8px;
                float: left;
            }
            .right {
				padding: 8px 8px 0 8px;
                float: right;
            }
			@media screen and (max-width: 960px) {
				.service-box {
					max-width: 45%;
				}
			}
			@media screen and (max-width: 768px) {
				.service-box {
					max-width: 50%;
				}
			}
			@media screen and (max-width: 480px) {
				.service-box {
					max-width: 100%;
				}
			}

			a{
				color: inherit;
				text-decoration: none;
				display: block;
				border: none;
				-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
				-webkit-user-select: none;
				-moz-user-focus: none;
				-moz-user-select: none;
			}
			a,a:hover,a:active,a:visited,a:link,a:focus{
				-webkit-tap-highlight-color:rgba(0,0,0,0);
				-webkit-tap-highlight-color: transparent;
				outline:none;
				background: none;
				text-decoration: none;
			}
			::selection {
				background: #FFF;
				color: #333;
			}
			::-moz-selection {
				background: #FFF;
				color: #333;
			}
			::-webkit-selection {
				background: #FFF;
				color: #333;
			}
		</style>
	</head>
	<body>
		<div class="services-section">
			<div class="inner-width">
				<h1 class="section-title">惠州学院实验室系统</h1>
				<div class="border"></div>
				<div class="services-container">
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-paint-brush"></i>
						</div>
						<div class="service-title">访问量</div>
						<div class="service-desc">
							总访问量320081人次，您是第31203位访问者
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-brush"></i>
						</div>
						<div class="service-title">排课</div>
						<div class="service-desc">
							点击图标查看排课详情
						</div>
					</div>
					<div class="service-box">
						<a href="../login.html">
							<div class="service-icon">
								<a th:href="@{/login}"><i class="fas fa-object-ungroup"></i></a>
							</div>
						</a>
							<div class="service-title">进入后台</div>
							<div class="service-desc">
								点击图标进入后台登录
							</div>

					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-paint-brush"></i>
						</div>
						<div class="service-title">实验室</div>
						<div class="service-desc">
							点击图标查看实验室详情
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-database"></i>
						</div>
						<div class="service-title">教学</div>
						<div class="service-desc">
							点击图标查看教学详情
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fab fa-android"></i>
						</div>
						<div class="service-title">设备管理</div>
						<div class="service-desc">
							点击图标进行设备管理
						</div>
					</div>
				</div>
			</div>
			<footer>
				<sapn class="left">版权所有 XXXXXXXXX公司</sapn>
				<sapn class="right">粤备202009300351号</sapn>
			</footer>
		</div>
		
	</body>
</html>